<template>
  <div class="category-popup-new">
    <van-popup
      v-model="showing"
      position="bottom"
      :style="{ height: '55%' }"
      v-bind="defaultPopupProps"
      @open="onOpen"
      @closed="onClosed"
    >
      <div class="cate-list">
        <div class="item-list">
          <div
            :class="
              item.code == level1 ? 'cate-item select-first' : 'cate-item'
            "
            v-for="(item, index) in columns[0].values"
            :key="index + item.code"
            @click="chooseLevel('level1', item.code)"
          >
            {{ item.industryName }}
          </div>
        </div>
        <div :class="level1 ? 'item-list item-list2' : 'item-list'">
          <template v-if="level1">
            <div
              class="cate-item"
              :class="item.code == level2 ? 'cate-item select' : 'cate-item'"
              v-for="(item, index) in columns[1].values"
              :key="index + item.code"
              @click="chooseLevel('level2', item.code)"
            >
              {{ item.industryName }}
            </div>
          </template>
        </div>
        <div :class="level2 ? 'item-list item-list3' : 'item-list'">
          <template v-if="level2">
            <div
              :class="item.code == level3 ? 'cate-item select' : 'cate-item'"
              v-for="(item, index) in columns[2].values"
              :key="index + item.code"
              @click="
                level3 = item.code;
                showing = false;
              "
            >
              {{ item.industryName }}
            </div>
          </template>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import popupMixins from "@/mixins/popup";
import enterpriseApi from "@/api/enterprise";
export default {
  name: "CategoryPopupNew",
  mixins: [popupMixins({ closeOnClickOverlay: true })],
  data() {
    return {
      cateListLevel1: [],
      allItem: { code: "", industryName: "全部" },
      columns: [
        {
          values: [],
          defaultIndex: 0,
        },
        // 第二列
        {
          values: [{ code: "", industryName: "全部" }],
          defaultIndex: 0,
        },
        {
          values: [{ code: "", industryName: "全部" }],
          defaultIndex: 0,
        },
      ],
      level1: "",
      level2: "",
      level3: "",
    };
  },
  watch: {
    //第一列变了 请求第二 {第三，第四 空}
    ///第二变了请求第三 {第四空}
    //第三变了请求第四
    level1(e) {
      if (!e) {
        this.level2 = "";
        this.level3 = "";
      }
      this.columns[2].values = [this.allItem];
      this.columns[2].defaultIndex = 0;
      this.getLevel2(e);
    },
    level2(e) {
      if (!e) {
        this.level3 = "";
      }
      this.getLevel3(e);
    },
  },
  methods: {
    chooseLevel(key, code) {
      this[key] = code;
      if (!code) {
        this.showing = false;
      }
    },
    onOpen() {},
    onClosed() {
      this.onConfirm();
    },
    onConfirm() {
      let { columns } = this;
      let level1Name = columns[0].values.find(
        (v) => v.code == this.level1
      ).industryName;
      let level2Name = columns[1].values.find(
        (v) => v.code == this.level2
      ).industryName;
      let level3Name = columns[2].values.find(
        (v) => v.code == this.level3
      ).industryName;
      this.$emit(
        "confirmCategpry",
        {
          industry_one: this.level1 ? level1Name : "",
          industry_two: this.level2 ? level2Name : "",
          industry_three: this.level3 ? level3Name : "",
        },
        [
          {
            code: this.level1,
            industryName: level1Name,
          },
          {
            code: this.level2,
            industryName: level2Name,
          },
          {
            code: this.level3,
            industryName: level3Name,
          },
        ]
      );
    },
    onCancel() {
      this.showing = false;
    },
    async getLevel4(industryCode) {
      let level4 = await enterpriseApi.getCompanyIndustryTypeLevel4({
        industryCode,
        pageSize: 9999,
      });
      level4 = level4.data.content
        .map((v) => {
          return {
            ...v,
            code: v.industryL4Code,
            industryName: v.industryL4Name,
          };
        })
        .filter((v) => v.code);
      if (!level4.length || !industryCode) {
        this.columns[3].values = [this.allItem];
        this.columns[3].defaultIndex = 0;
        this.level4 = "";
      } else {
        level4.unshift(this.allItem);
        this.columns[3].values = level4;
        this.level4 = level4[0].code;
      }
    },
    async getLevel3(industryCode, first) {
      let level3 = await enterpriseApi.getCompanyIndustryTypeLevel3({
        industryCode,
        pageSize: 9999,
      });
      level3 = level3.data.content
        .map((v) => {
          return {
            ...v,
            code: v.industryL3Code,
            industryName: v.industryL3Name,
          };
        })
        .filter((v) => v.code);
      if (!level3.length || !industryCode) {
        this.columns[2].values = [this.allItem];
        this.columns[2].defaultIndex = 0;
        this.level3 = "";
      } else {
        level3.unshift(this.allItem);
        this.columns[2].values = level3;
        this.level3 = level3[0].code;
      }

      // if (first) {
      //   this.getLevel4(level3[0].code, first);
      // }
    },
    async getLevel2(industryCode, first) {
      let level2 = await enterpriseApi.getCompanyIndustryTypeLevel2({
        industryCode,
        pageSize: 9999,
      });
      level2 = level2.data.content
        .map((v) => {
          return {
            ...v,
            code: v.industryL2Code,
            industryName: v.industryL2Name,
          };
        })
        .filter((v) => v.code);
      if (!level2.length || !industryCode) {
        this.columns[1].values = [this.allItem];
        this.columns[1].defaultIndex = 0;
        this.level2 = "";
      } else {
        level2.unshift(this.allItem);
        this.columns[1].values = level2;
        this.level2 = level2[0].code;
      }

      // if (first) {
      //   this.getLevel3(level2[0].code, first);
      // }
    },
    async getLevelList() {
      let level1 = await enterpriseApi.getCompanyIndustryTypeLevel1({
        pageSize: 9999,
      });
      level1 = level1.data.content.map((v) => {
        return {
          ...v,
          code: v.industryL1Code,
          industryName: v.industryL1Name,
        };
      });
      level1.unshift(this.allItem);
      this.columns[0].values = level1;
      this.level1 = level1[0].code;
    },
  },
  created() {
    this.getLevelList();
  },
};
</script>

<style lang="scss" scoped>
.category-popup-new {
  .van-popup {
    display: flex;
    height: 100%;
  }
  .cate-list {
    flex: 1;
    display: flex;
    .item-list {
      overflow-y: scroll;
      flex: 1;
      .cate-item {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #222222;
        line-height: 16px;
        padding: 16px 10px;
      }
      .cate-item.select {
        color: #3460d7;
      }
      .cate-item.select-first {
        color: #3460d7;
        background-color: #f5f6f7;
      }
    }
    // .item-list:nth-child(1) {
    //   overflow-y: scroll;
    // }
    .item-list2:nth-child(2) {
      background-color: #f5f6f7;
    }
    .item-list3:nth-child(3) {
      background-color: #ebedf0;
    }
  }
}
</style>
